<script setup>
import MoniterItem from "@/components/MoniterItem.vue";
import up from './img/up.png'
import down from './img/down.png'
import { onMounted, inject, reactive, nextTick } from "vue";

const $axios = inject("$axios");

onMounted(() => {
  getBackHomeCount();
});

function autoScroll() {
  const el = document.querySelector("#tableList");
  const elHeight = el.offsetHeight;
  const sHeight = el.scrollHeight;
  setInterval(() => {
    if (el.scrollTop < sHeight - elHeight) {
      el.scrollTop++;
    } else {
      el.scrollTop = 0;
    }
  }, 50);
}

function openWindow() {
  window.open("https://bpmn.honqun.com/admin/#/yq/PersonBackHome")
}
function getBackHomeCount() {
  $axios
    .get("person_back_home/backHomeSum")
    .then((res) => {
      // const res.data.data=[]
      const data=[
        {
        number:'平店乡',
        palce:'15',
        added:'26',
      },
        {
        number:'汤庄乡',
        palce:'30',
        added:'50',
      },
        {
        number:'白寺镇',
        palce:'22',
        added:'34',
      },
        {
        number:'大武乡',
        palce:'33',
        added:'44',
      },
        {
        number:'化河乡',
        palce:'18',
        added:'26',
      },
        {
        number:'固城镇',
        palce:'11',
        added:'22',
      },
        {
        number:'巴村镇',
        palce:'15',
        added:'26',
      },]
     data.forEach((item) => {
        tableData.push({
          number: item.number,
          palce: item.palce,
          added: item.added,
        });
      });
    })
    .then(nextTick)
    .then(() => {
      autoScroll();
    });
}

const tableData = reactive([
  // {
  //   number: "1",
  //   palce: "黄寨镇",
  //   added: "12",
  //   count: "22",
  //   reded: "34",
  //   yellowed: "44",
  //   quarantine: "34",
  //   home: "4344",
  // },
]);
</script>

<template>
  <MoniterItem title="监控AI与场所码" style="width: 100%;">
    <template #content>
      <div class="line" style="font-size: 14px">
        <div style="flex: 0.5">场所名称</div>
        <div style="flex: 1">AI识别人流</div>
        <div style="flex: 0.8">场所码人次</div>
        <div style="flex: 0.8">差异</div>
      </div>
      <div style="height: 90%; overflow: auto" id="tableList">
        <div
          :class="{ line: true, lineColor: index % 2 === 1 }"
          v-for="(item, index) in tableData"
          :key="index"
          ref="tableRef"
        >
          <div style="flex: 0.5;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;-o-text-overflow:ellipsis;">
            <el-tooltip
              class="box-item"
              effect="dark"
              :disabled="item.number.length<4"
              :content="item.number"
              placement="top-start"
            >
              {{ item.number }}
            </el-tooltip>
          </div>
          <div style="flex: 1">{{ item.palce }}</div>
          <div style="flex: 0.8">{{ item.added }}</div>
          <div style="flex: 0.8">
<!--            {{ item.count }}-->
            <img class="table_icon" :src="index % 2 ===0?up:down" alt="">
            <span :style="index % 2 ===0?{color:'#F83D25'}:{color:'#25F845'}">{{index % 2 ===0?'差异较大':'差异较小'}}</span>
          </div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<style lang="less" scoped>
.table_icon{
  margin-right: 10px;
}
.line {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  div {
    text-align: center;
  }
}
.lineColor {
  background-color: #2a64b1;
}
</style>
